<template>
    <div class="notice-box flexs" :style="{ background: data.style.background, borderRadius: `${data.rpxStyle['border-radius']}px` }">
        <div class="notice-left">
            <!-- <el-image class="notice-icon" :src="IMG_URL + '/public/20240621_20230427_3c68deebfa0afaa6f815391fffd77dde_a9f22a072e56457fa78323eddf0f9b51.png'" fit="cover" v-if="data.style.type == 1" /> -->
            <el-image class="notice-icon" :src="notice" fit="cover" v-if="data.style.type == 1" />
            <el-image class="custom-icon" :src="data.data.custom_icon" fit="cover" v-if="data.style.type == 2" />
        </div>
        <!-- 纯文本 -->
        <div class="notice-right flexs line-one" :style="{ color: data.style.color }" v-if="data.style.notice_type == 1">
            <p :class="[{ 'right-text': data.style.arrow_switch }]">
                {{ data.data.data ? data.data.data : "请填写内容，内容过长时，将会在手机上滚动显示" }}
            </p>
            <el-icon size="16px" :color="data.style.color" v-if="data.style.arrow_switch"><ArrowRight /></el-icon>
        </div>
        <!-- 文章列表滚动 -->
        <div class="notice-right" v-else>
            <el-carousel height="20px" direction="vertical" :autoplay="true">
                <el-carousel-item v-for="item in data.data.reqData" :key="item">
                    <div class="notice-item flexs">
                        <p class="notice-item__title line-one" :style="{ color: data.style.color }">{{ item.title }}</p>
                        <el-icon :color="data.style.color"><ArrowRight /></el-icon>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance } from "vue"
import { ArrowRight } from "@element-plus/icons-vue"
import { IMG_URL } from "@/assets/common/config"

import notice from "@images/notice.png"

const { proxy } = getCurrentInstance()

/**
 * 容器
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 6,
            type_name: "notice",
            text: "公告通知",
            style: {
                notice_type: 1, // 公告样式，1是纯文本，2是文章列表
                cate_id: "", // 文章分类
                type: 1, // 公告左侧图标，1是标准，2是自定义图标
                background: "#fffbe8", // 滚动条背景
                color: "#ed6a0c", // 文本颜色
                arrow_switch: false, // 是否显示右侧箭头
            },
            data: {
                data: "请填写内容，内容过长时，将会在手机上滚动显示",
                custom_icon: "", // 自定义图标
            },
        },
    },
})
</script>

<style lang="less" scoped>
.notice-item {
    line-height: 20px;
    .notice-item__title {
        font-size: 14px;
    }
}
.notice-box {
    justify-content: flex-start;
    overflow: hidden;
    padding: 0px 10px;
    height: 40px;
    .notice-left {
        flex: none;
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        .notice-icon {
            width: 19px;
            flex: none;
        }
        .custom-icon {
            flex: none;
            width: 68px;
        }
    }
    .notice-right {
        flex: 1;
        line-height: 16px;
    }

    .right-text {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
    }
    .el-icon {
        flex: none;
        margin-left: 8px;
    }
}
</style>
